<template>
	<view class="body">
		<picker mode="selector" @change="bindPickerChange" :value="index" :range="array">
			<view class="room">
				<text id="roo">房屋</text>
				<text class="child" style="font-size: 28rpx;">{{array[index]}}</text>
				<!-- <view class="uni-input">{{array[index]}}</view> -->
				<text class="iconfont icon-you"></text>
			</view>
		</picker>

		<view class="room">
			<text id="roo">访客姓名</text>
			<input style="font-size: 28rpx" type="text" placeholder="请输入真实姓名">
		</view>
		<view class="room">
			<text id="roo">住户性别</text>
			<radio-group class="radios">
				<view style="transform:scale(0.8)" class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items"
					:key="item.value">

					<label class="radio">
						<radio :value="item.value" :checked="index === current"/>
					</label>
					<label class="radio">{{item.sex}}</label>
				</view>
			</radio-group>
		</view>
		<view class="room">
			<text id="roo">手机号码</text>
			<input style="font-size: 28rpx;" type="number" placeholder="请输入手机号码">
		</view>
		<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
			<view class="room">
				<text id="roo">访问日期</text>
				<text class="child" style="font-size: 28rpx;">{{date}}</text>
				<text class="iconfont icon-you"></text>
			</view>
		</picker>
		<picker mode="selector" @change="bindPickerChange1" :value="index1" :range="times">
			<view class="room">
				<text id="roo">访问时长</text>
				<text class="child" style="font-size: 28rpx;">{{times[index1]}}</text>
				<text class="iconfont icon-you"></text>
			</view>
		</picker>
		<view>
			<button class="btn" @click="gopass(name)">生成通行证</button>
		</view>
	</view>
</template>

<script>
	import {http} from '../../utils/http.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				array:[],
				title: 'picker',
				name:'',
				// array: ['南航碧桂园小区11栋2单元401', '南航碧桂园小区02栋2单元302', '南航碧桂园小区13栋5单元404'],
				times:['一天','12小时','6小时','3小时','2小时','1小时','0.5小时'],
				index: 0,
				index1:0,
				current:0,
				date: currentDate,
				time: '12:01',
				items: [{
					value: '1',
					sex: '男',
				}, {
					value: '0',
					sex: '女',
				}],
				array:[]
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			getData1(){
				http({
					url:'/visitor/list',
					method:'get',
					params:{
						page:1,
						limit:10,
						visitorName:this.name
					}
				}).then(({data})=>{
					data.forEach((v)=>{
						this.array.push(v.visitorHouse.room)
					})
					console.log(this.array);
				})
			},
			gopass(v){
				uni.navigateTo({
					url: '../passCheck/passCheck?name=' + v
				});
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			bindTimeChange: function(e) {
				this.time = e.detail.value
			},
			bindPickerChange1:function(e){
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index1 = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		},
		onLoad(){
			this.getData1();
		}
	}
</script>

<style lang="less">
	@import url("../../static/font/iconfont.css");

	.body {
		display: flex;
		flex-direction: column;
		padding: 0 36rpx;
		margin: 80rpx 0;

		.room {
			width: 678rpx;
			height: 112rpx;
			border-bottom: 1rpx solid #eee;
			display: flex;
			align-items: center;

			#roo {
				width: 148rpx;
				margin-right: 92rpx;
			}

		}

		.child {
			width: 400rpx;
			margin-right: 20rpx;
		}

		.btn {
			width: 670rpx;
			height: 90rpx;
			background-color: #006eff;
			color: #fff;
			margin-top: 78rpx;
		}

		#radio-name {
			width: 350rpx;
			display: flex;
		}

		.radio {
			margin-right: 30rpx;
		}

		.radios {
			display: flex;
		}
	}
</style>
